<template>
  <div class="mobile"
       v-infinite-scroll="handleInfiniteOnLoad"
       :infinite-scroll-disabled="busy"
       :infinite-scroll-distance="10">
    <a-tabs class="myRecord-nav mobileHeight" default-active-key="0" @change="callback">

      <a-tab-pane key="0" tab="全部">
          <a-list item-layout="horizontal" :data-source="data">
            <a-list-item class="goodList" slot="renderItem" slot-scope="item, index">
              <div class="good-img">
                <img v-if="item.picAttach != null" :src="picPostAction+item.picAttach">
                <img v-if="item.picAttach  === null" src="../../assets/img/mobile/banner1.png">
              </div>
              <div class="good-list">
                <a slot="title" @click="linkDetail(item.id)">{{ item.title }}</a>
                <p>{{ item.createTime }} <!-- -&#45;&#45;{{ item.status }}-->
                  <a-tag v-if="item.status  === 1" class="myRecord-status fr" color="orange">未审核</a-tag>
                  <a-tag v-else-if="item.status  === 2" class="myRecord-status fr" color="blue">展示中</a-tag>
                  <a-tag v-else-if="item.status  === 3" class="myRecord-status fr" color="red">未通过</a-tag>
                </p>
              </div>
            </a-list-item>

            <a-spin v-if="loading" class="demo-loading" />
          </a-list>
        </a-tab-pane>

        <a-tab-pane key="2" tab="展示中">
          <a-list item-layout="horizontal" :data-source="data">
            <a-list-item class="goodList" slot="renderItem" slot-scope="item, index">
              <div class="good-img">
                <img v-if="item.picAttach != null" :src="picPostAction+item.picAttach">
                <img v-if="item.picAttach  === null" src="../../assets/img/mobile/banner1.png">
              </div>
              <div class="good-list">
                <a slot="title" @click="linkDetail(item.id)">{{ item.title }}</a>
                <p>{{ item.createTime }}</p>
              </div>
            </a-list-item>

            <a-spin v-if="loading" class="demo-loading" />
          </a-list>
        </a-tab-pane>

        <a-tab-pane key="1" tab="未审核">
          <a-list item-layout="horizontal" :data-source="data">
            <a-list-item class="goodList" slot="renderItem" slot-scope="item, index">
              <div class="good-img">
                <img v-if="item.picAttach != null" :src="picPostAction+item.picAttach">
                <img v-if="item.picAttach  === null" src="../../assets/img/mobile/banner1.png">
              </div>
              <div class="good-list">
                <a slot="title" @click="linkDetail(item.id)">{{ item.title }}</a>
                <p>{{ item.createTime }}</p>
              </div>
            </a-list-item>

            <a-spin v-if="loading" class="demo-loading" />
          </a-list>
        </a-tab-pane>

      <a-tab-pane key="3" tab="未通过">
        <a-list item-layout="horizontal" :data-source="data">
          <a-list-item class="goodList" slot="renderItem" slot-scope="item, index">
            <div class="good-img">
              <img v-if="item.picAttach != null" :src="picPostAction+item.picAttach">
              <img v-if="item.picAttach  === null" src="../../assets/img/mobile/banner1.png">
            </div>
            <div class="good-list">
              <a slot="title" @click="linkDetail(item.id)">{{ item.title }}</a>
              <p>{{ item.createTime }}</p>
            </div>
          </a-list-item>

          <a-spin v-if="loading" class="demo-loading" />
        </a-list>
      </a-tab-pane>

      </a-tabs>

    <div class="weui-tabbar">
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="firstPage()">
        <span><i class="iconfont iconzhuye2"></i></span>
        <p class="weui-tabbar__label">首页</p>
      </a>
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="hrhsPage()">
        <span><i class="iconfont icondianzan1"></i></span>
        <p class="weui-tabbar__label">好人好事</p>
      </a>
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="myPage()">
        <span><i class="iconfont iconwode-copy"></i></span>
        <p class="weui-tabbar__label">我的</p>
      </a>
    </div>
  </div>
</template>
<script>

import infiniteScroll from 'vue-infinite-scroll';
import {getAction} from "@api/manage";

var status = 0;
var pageNo = 1;
var totalCount =0;
let userId = localStorage.getItem("userId")

export default {
  name: 'MyRecordList',
  directives: { infiniteScroll },
  data() {
    return {
      data:[],
      loading: false,
      busy: false,
      picPostAction:""
    };
  },
  created(){
    document.title = "我的记录";
    status = 0;
    pageNo = 1;
    this.initBaseUrl();
    this.getRecodeList();
  },
  methods: {
    initBaseUrl(){
      this.picPostAction=window._CONFIG['domianURL']+"/file/sysFile/download?fileId=";
    },
     getRecodeList(){
      this.loading = true;
      let data;

      if(pageNo === 1){
         data =[];
      }else{
         data = this.data;
      }

      var url ="/goodThings/list?pageNo="+pageNo+"&userId="+userId;
      if(status > 0){
        url ="/goodThings/list?status="+status+"&pageNo="+pageNo+"&userId="+userId;
      }

       getAction(url).then(res=>{
        if(res.success){
          this.data = data.concat(res.result.records).map((item, index) => ({ ...item, index }));
          pageNo = res.result.current + 1;
          totalCount = res.result.total;
          this.loading = false;
        }
      }).catch(()=>{
        this.loading = false;
      })
    },
    linkDetail(id){
      this.$router.push({path:'/GoodThingsDetail',query:{id:id}});
    },
    callback(key){
      status = key;
      pageNo = 1;
      this.busy = false;
      this.getRecodeList();
    },
    handleInfiniteOnLoad() {
      if (this.data.length >= totalCount) {
        this.busy = true;
        this.loading = false;
        return;
      }
      this.getRecodeList();
    },
    firstPage(){
      this.$router.push('/MinorsProtecteGuide');
    },
    hrhsPage(){
      this.$router.push('/GoodThingsList');
    },
    myPage(){
      this.$router.push('/PersonalMsg');
    }
  }
};
</script>

<style>
.demo-loading {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>